<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
            right: 0px;
        }
        
        .son {
            width: 100px;
            height: 50px;
            position: absolute;
            background-color: green;
            left: 50px;
            top: 0px;
        }
    </style>
</head>

<body style="margin: 0px;">
    <div class="box">
        <div>></div>
        <div class="son">问题反馈</div>
    </div>
</body>
<script>
    var box = document.querySelector('.box');
    var son = document.querySelector('.son');
    box.addEventListener('mouseenter', function() {
        var a = -10;
        console.log(50 - a);
        var target = -100;
        // son.style.left = '-100px'
        var a1 = setInterval(function() {
            if (son.offsetLeft == target || son.offsetLeft < -100) {
                clearInterval(a1);
            } else {
                // console.log(son.offsetLeft);
                //由块到慢
                //慢到快
                // (目标值 - 现在的位置 )   /   10  步长
                //动画效果 -100 -50/10
                var moveLeft = (target + son.offsetLeft) / 10
                    // console.log(moveLeft);
                    // -100 - 
                moveLeft = Math.ceil(moveLeft);
                if (son.offsetLeft + moveLeft < target) {
                    moveLeft = target - son.offsetLeft;
                }
                son.style.left = son.offsetLeft + moveLeft + 'px';
            }
        }, 60)
    })
    box.addEventListener('mouseleave', function() {
        var a1 = setInterval(function() {
            if (son.offsetLeft == 50) {
                clearInterval(a1);
            } else {
                son.style.left = son.offsetLeft + 10 + 'px';
            }
        }, 60)
    })
</script>

</html>